import styles from "./index.module.less";
import * as echarts from 'echarts';
import {
	ProFormSelect,
} from "@ant-design/pro-components";
import React, { useEffect, useRef } from 'react';
import { getTaskByDate } from "@/api/modules/dashboard";
import { useRequest } from "ahooks";
import { map } from 'lodash';

interface Props {
    chartData?: object
}

export default (props: Props) => {
    const { chartData } = props;
    const chartRef = useRef(null);

    useEffect(() => {
        // 初始化图表
        const myChart = echarts.init(chartRef.current);

        const xData = map(chartData, (item: any) => item.jobType)
        const seriesData = map(chartData, (item: any) => item.count)
        // 配置项
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {
                right: 0,
                top: 15,
            },
            yAxis: {
                type: 'value'
            },
            color: ['#1364FF', '#F92356', '#FF9422'],
            xAxis: {
                type: 'category',
                data: xData,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            series: [
                {
                    name: '任务数量',
                    type: 'bar',
                    stack: 'total',
                    barWidth: 15,
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: seriesData
                }
            ]
        };

        // 设置配置项
        myChart.setOption(option);

        // 组件卸载时销毁图表
        return () => {
            myChart.dispose();
        };
    }, [chartData]);
    return (
        <div className={styles.container}>
            <div className={styles.commonHeader}>
                <div className={styles.title}>今日任务统计</div>
                {/* <div className={styles.right}>
                    <ProFormSelect
                        label="所属组织"
                        name="active_address"
                        placeholder={"请选择"}
                    />
                </div> */}
            </div>
            <div className={styles.content}>
                <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
            </div>
        </div>
    )
}